<template>
  <div class="historical_data_wrap">
    <p>
      <CnBoldP class="mt-11 text-20">历史数据</CnBoldP>
    </p>
    <p class="mt-10">
      <CnNormalP>根据您点击的设备，跳转到参数历史记录</CnNormalP>
    </p>
    <ProductFilesItem class="mt-10"></ProductFilesItem>
    <a-spin class="load" v-if="isDevListLoading" />
    <div v-else class="dev_list_box">
      <a-card
        class="dev_item_card"
        :hoverable="true"
        v-for="(dld, indexD) in devListData"
        :key="indexD"
        @click="devCardClick(dld)"
      >
        <div class="header_box">
          <div class="dev_name_box">
            {{ dld.devName }}
          </div>
          <div class="dev_status_box">
            <img
              class="icon"
              v-if="dld.devStatus == '在线'"
              src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/device-online.png"
            />
            <img
              class="icon"
              v-else
              src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/device-offline.png"
            />
            <span class="status_text">
              {{ dld.devStatus }}
            </span>
          </div>
        </div>

        <div class="content_box">
          <div class="last_online_time_box">
            <span class="label">最近在线时间</span>
            <span class="text">{{ dld.lastOnlineTime }}</span>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue'
  export default defineComponent({
    name: 'HistoricalData'
  })
</script>
<script lang="ts" setup>
  import {CnBoldP, CnBoldSpan, CnMediumP, CnNormalP, CnNormalSpan} from '@/components/text'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {getUserId} from '@/libs/auth'
  import {selectSimpleDevList} from '@/api/public.ts'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  import {toSingleParam} from '@/libs/pageRedirect'
  import {notification} from 'ant-design-vue'

  const {router} = useGlobalAPI()

  // 查询设备列表的函数
  const selectSimpleDevListFunc = async () => {
    isDevListLoading.value = true
    let userId = getUserId()
    await selectSimpleDevList({userId: userId}).then(res => {
      devListData.value = res.data.reverse()
      isDevListLoading.value = false
    })
  }

  // 设备卡片点击事件
  const devCardClick = (devItem: any) => {
    router.push({
      path: `/CBC/dataOverview/singleDevParams`,
      query: {
        devId: devItem.devId
      }
    })
    // toSingleParam({devId:devItem.devId,paramName:dev})
  }

  // 设备列表加载标识
  const isDevListLoading = ref(true)

  // 设备列表数据
  const devListData = ref([])

  // init
  onMounted(() => {
    selectSimpleDevListFunc()
    notification['info']({
      message: '提示',
      description: '点击对应的设备卡片，即可进入设备参数历史数据页面！'
    })
  })
</script>

<style lang="less" scoped>
  :deep(.anticon-info-circle) {
    width: 10px;
    height: 10px;
  }

  :deep(.ant-card-body) {
    padding: 0px;
    height: 100%;
    box-shadow: 1px 1px 2px #d3d3d3, -1px -1px 2px #ededed;
  }

  .historical_data_wrap {
    height: 86vh;
    position: relative;

    .load {
      position: absolute;
      top: 40%;
      left: 50%;
    }

    .dev_list_box {
      width: 100%;
      // height: 74%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // border: 1px solid red;

      .dev_item_card {
        height: 100px;
        width: 300px;
        margin: 0px 34px 30px 0px;
        border-radius: 4px;
        box-sizing: border-box;
        border: none;

        .header_box {
          box-shadow: 1px 1px 2px #d3d3d3, -1px -1px 2px #ededed;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 4px 10px 4px 10px;
          background: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/card-vein-inline.png)
            no-repeat;
          background-size: 120%, 100%;

          .dev_name_box {
            color: rgb(49, 69, 106);
            font-family: kaigengo-regular;
            font-weight: bold;
            font-size: 14px;
            letter-spacing: 1px;
          }

          .dev_status_box {
            display: flex;

            .icon {
              width: 16px;
              height: 16px;
              margin-right: 4px;
              position: relative;
              top: 2.6px;
            }

            .status_text {
              color: rgb(49, 69, 106);
              font-family: kaigengo-regular;
              font-weight: bold;
              font-size: 14px;
              letter-spacing: 1px;
            }
          }
        }

        .content_box {
          padding: 20px 10px 10px 10px;

          .last_online_time_box {
            padding: 4px 4px 4px 4px;

            .label {
              color: rgb(49, 69, 106);
              font-family: kaigengo-regular;
              font-weight: bold;
              font-size: 14px;
              letter-spacing: 1px;
            }

            .text {
              margin-left: 16px;
              color: rgb(49, 69, 106);
              font-family: kaigengo-regular;
              font-weight: 400;
              font-size: 14px;
              letter-spacing: 1px;
            }
          }
        }
      }
    }
  }
</style>
